import { ShoppingCartOutlined, ShoppingOutlined, UserOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Col, Row, Statistic } from 'antd';
import React, { useEffect, useState } from 'react';
import { getDashBoards } from './service';

export default function DashBoard(): React.ReactElement {
  const [boards, setBoards] = useState<any>({});
  const getDash = async () => {
    const res = await getDashBoards();
    setBoards(res);
  };
  useEffect(() => {
    getDash();
  }, []);
  return (
    <PageContainer>
      <div className="site-statistic-demo-card">
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic
                title="用户数"
                value={boards.users_count}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="商品数"
                value={boards.goods_count}
                precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ShoppingCartOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="订单数"
                value={boards.order_count}
                precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ShoppingOutlined />}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </PageContainer>
  );
}
